import React, { useEffect, useRef, useState } from 'react';
import styles from './index.less';
import { DatePicker, Tag } from 'antd';
import moment from 'moment';
import { CloseCircleOutlined } from '#/utils/antdIcons';
import { connect } from 'umi';
const tagDisabledStyle = {
  color: 'var(--ant-cus-font_a45)',
  backgroundColor: 'var(--ant-cus-bg2_a20)',
  border: 'none',
};
const DatePickerMultiple = ({ value = [], onChange, disabledDate, disabled, theme }) => {
  const pickerRef = useRef(null);

  const [open, setOpen] = useState(false);

  useEffect(() => {
    document.addEventListener('click', (e) => {
      if (!pickerRef?.current?.contains(e.target)) {
        setOpen(false);
      }
    });
    return () => {
      document.removeEventListener('click', () => {});
    };
  }, []);

  const clearSelect = () => {
    onChange([]);
  };

  const clickDate = (v) => {
    const date = moment(v).format('YYYY-MM-DD');
    if (value.some((i) => i === date)) {
      const arr = value.filter((i) => i !== date);
      onChange(arr);
    } else {
      onChange([...value, date]);
    }
  };

  return (
    <div className={styles.date_picker_multiple} ref={pickerRef}>
      <DatePicker
        disabled={disabled}
        getPopupContainer={() => {
          return pickerRef.current;
        }}
        style={{ width: '100%' }}
        {...(disabledDate ? { disabledDate } : {})}
        open={open}
        allowClear={false}
        dateRender={(current) => {
          const date = moment(current).format('YYYY-MM-DD');
          const style = {
            position: 'relative',
            zIndex: 2,
            display: 'inline-block',
            minWidth: '24px',
            height: '24px',
            lineHeight: '24px',
            borderRadius: 5,
            // color: theme == 'light' ? 'rgba(0, 0, 0, 0.3)' : 'rgba(255, 255, 255, 0.3)',
            transition: 'background 0.3s, border 0.3s',
          };
          if (value.some((i) => i === date)) {
            style.border = '1px solid #1890ff';
            style.borderRadius = '50%';
            // style.color = theme == 'light' ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255)';
          }
          return (
            <div style={style} onClick={() => clickDate(current)}>
              {current.date()}
            </div>
          );
        }}
      />
      <div className={styles.select}>
        <div
          className={styles.select_tags}
          onClick={(e) => {
            e.stopPropagation();
            setOpen(!open);
          }}
        >
          {value.length === 0 ? (
            <span className={styles.placeholder}>请选择日期</span>
          ) : (
            value.map((i) => (
              <Tag
                style={{
                  marginTop: '1px',
                  borderColor: 'var(--ant-cus-bd_default)',
                  ...(disabled ? tagDisabledStyle : {}),
                }}
                key={i}
              >
                {i}
              </Tag>
            ))
          )}
        </div>
        {value.length !== 0 ||
          (!disabled && (
            <div className={styles.close} onClick={clearSelect}>
              <CloseCircleOutlined />
            </div>
          ))}
      </div>
    </div>
  );
};
export default connect(({ global }) => ({
  theme: global?.theme,
}))(DatePickerMultiple);
